/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import {
  Form,
  Input,
  InputNumber,
  Radio,
  TreeSelect,
  Select,
  Collapse,
  Button,
  message,
  Card,
  Result,
  Row,
  Col,
  Steps,
  Typography
} from 'antd';
import {connect} from 'dva';
import './index.less'
import request from '@/utils/request';
import {printUtils} from '@/utils/utils';
const { Paragraph } = Typography;
const FormItem = Form.Item;
const { Step } = Steps;
const Option = Select.Option;

@connect(({ owner}) => ({
  owner,
}))
@Form.create()
class EditUserArchives extends Component {
  constructor(props) {
    super(props);
    this.formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 6},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 18},
        sm: {span: 16},
      }
    };
    this.formItemLayoutWithLabel2 = {
      labelCol: {
        xs: {span: 6},
        sm: {span: 10},
      },
      wrapperCol: {
        xs: {span: 18},
        sm: {span: 13},
      }
    };
    this.state = {
      current:0,
      amount:0,
      remark:'',
      type:1,
      payId:'',
      payObj:{},
      detail: {owner:{}},
      meterDetail:{},
    };
  }
  componentDidMount() {
    const that=this
    that.fetchMeter();
  }
  fetchMeter = () => {
    const that = this;
    request(`/meters/${this.props.editRecord.meter_number}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          meterDetail:response.data.data
        })
      }


    });
  };
  print=()=>{

    console.log(this.state.payId)
    request(`/print/payments/${this.state.payId}`,{
      method:'POST',
    }).then((response)=>{
      if(response.status===200){
        printUtils(response.data.data);
      }

    });
  }
  renderInfo=()=>{
    const { getFieldDecorator, validateFields } = this.props.form;
    console.log('this.state.meterDetail.initial_value',this.state.meterDetail.initial_value)

    return    <Form >
      <FormItem
        style={{width:'50%',display:'inline-block'}}
        label={'水表编号'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.meter_number}
      </FormItem>
      <FormItem
        style={{width:'50%',display:'inline-block'}}
        label={'户主姓名'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
          <span title={this.props.editRecord.name}>{this.props.editRecord.name}</span>
        </Paragraph>

      </FormItem>
      <FormItem
        style={{width:'50%',display:'inline-block'}}
        label={'户主地址'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
          <span style={{color:'rgb(0,0,0)'}} title={this.props.editRecord.address}>{this.props.editRecord.address}</span>
        </Paragraph>
      </FormItem>
      <FormItem
        style={{width:'50%',display:'inline-block'}}
        label={'户主手机'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.mobile}

      </FormItem>
      <FormItem
        style={{width:'50%',display:'inline-block'}}
        label={'用水性质'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.name}
      </FormItem>
      <FormItem
        style={{width:'50%',display:'inline-block'}}
        label={'余额'}
        {...this.formItemLayoutWithLabel}
      >
        <span
          style={{padding:'5px'}}
          className={Number(this.props.editRecord.balance) > Number(this.props.editRecord.balance_alarm_amount) ? 'table-success table-status' :
            Number(this.props.editRecord.balance) > 0?'table-warm table-status':'table-error table-status'}>{this.props.editRecord.balance}</span>
      </FormItem>
      <FormItem
        style={{width:'50%',display:'inline-block'}}
        label={'水表底数'}
        {...this.formItemLayoutWithLabel}
      >
        {this.state.meterDetail.initial_value}
      </FormItem>
      <FormItem
        style={{width:'50%',display:'inline-block'}}
        label={'水表厂商'}
        {...this.formItemLayoutWithLabel}
      >
        {this.state.meterDetail.vendor_name}
      </FormItem>


      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="新水表底数">
        {getFieldDecorator('initial_value', {
          initialValue: this.state.meterDetail.initial_value,
          rules: [
            { required: true, message: '请输入新水表底数' },
          ],
        })(<InputNumber min={0}   style={{width:'200px'}}   placeholder="请输入新水表底数" />)}
      </Form.Item>
    </Form>
  }

  render() {
    return (
      <div>
        {(this.state.meterDetail.initial_value===0||this.state.meterDetail.initial_value)&&this.renderInfo()}
      </div>
    );
  }
}

export default EditUserArchives;
